<template>
	<!-- 管理收货地址 -->
	<div class="address">
		<div class="top_div" >
			<img src="../assets/icon_info.png" />
			<span>管理收货地址</span>
			<span>新建</span>
			
		</div>
		<div class="list">我的收货地址</div>
		<div class="list_div"  v-for="item in addlist">
			<div class="item_top_div">
				<span>{{item.addName}}</span>
				<span>{{item.phone}}</span>
			</div>
			<div class="item_bottom_div">
				<span>{{item.addressInfo}}</span>
				<img src="../assets/icon_next.png"/>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				addlist:[
					{"addName":"小慕","phone":"18956165661",
				    "addressInfo":"北京市海定区西三环 2号院  北京理工大学  国际科技园2号楼"},
					{"addName":"小慕","phone":"18956165661",
					"addressInfo":"北京市海定区西三环 2号院  北京理工大学  国际科技园2号楼"}
				]
			}
		}
	}
</script>

<style scoped>
	.address{
		background-color: #F9F9F9;
		width: 100%;
		height: 100%;
		position: fixed;
	}
	.top_div{
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		height: 44px;
		background-color: white;
	}
	.top_div :nth-child(1){
		width: 10px;
		height: 16px;
		margin-top: 15px;
		margin-left: 18.5px;
		margin-bottom: 13.7px;
	}
	.top_div :nth-child(2){
		font-family: PingFangSC-Regular;
		font-size: 16px;
		color: #333333;
		line-height: 44px;
	}
	.top_div :nth-child(3){
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #333333;
		text-align: right;
		line-height: 44px;
		margin-right: 18px;
	}
	.list{
		font-size: 14px;
		color: #333333;
		margin-left: 18px;
		padding-top: 16px;
	}
	.list_div{
		background-color: white;
		padding-top: 12px;
		margin-left: 18px;
		margin-right: 18px;
	}
	.list_div .item_top_div{
		display: flex;
	}
	.list_div .item_top_div span{
		padding-left: 16px;
		padding-top: 18px;
	}
	.list_div .item_top_div :nth-child(1){
		font-size: 14px;
		color: #999999;
		flex: 1;		
	}
	.list_div .item_top_div :nth-child(2){
		font-size: 14px;
		color: #999999;
		flex: 2;
		padding-left: 16px;
	}
	.list_div .item_bottom_div{
		padding-top: 8px;
		height: 40px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
	}
	.list_div .item_bottom_div :nth-child(1){
		padding-left: 16px;
		padding-top: 8px;
		flex: 14;
	}
	.list_div .item_bottom_div :nth-child(2){
		width: 3px;
		height: 10px;
		flex: 1;
		padding-right:16px ;
	}
</style>
